<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>单个终端</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>机器码</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="机器码" name="deviceCode" th:value="${deviceCode}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>MAC</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="MAC" name="deviceMac" th:value="${deviceMac}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>播放开始时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="结束时间" name="startTime" class="fp-time" th:value="${startTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>播放结束时间</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="结束时间" name="endTime" class="fp-time" th:value="${endTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group z-ta-r ">
                        <button class="j-btn-control z-btn z-default" id="export">导出</button>
                    </div>

                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>播放时间</th>
                        <th>节目ID</th>
                        <th>节目名称</th>
                        <th>内网IP</th>
                        <th>外网IP</th>
                        <th>节目时长(s)</th>
                        <th>开始时间</th>
                        <th>过期时间</th>
                        <th>分组</th>
                        <th>mips版本</th>
                        <th>固件版本</th>
                        </thead>
                        <tbody>
                        <tr th:each="deviceInfo : ${result}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td>
                                <span th:text="${deviceInfo.playingTime}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.programId}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.programName}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.intranetIp}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.externalIp}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.programDuration == null?'':#numbers.formatDecimal((deviceInfo.programDuration/1000.0), 0, 2)}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.startTime}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.overdueTime}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.deviceGroup}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.deviceSoftVer}"></span>
                            </td>
                            <td>
                                <span th:text="${deviceInfo.deviceHardVer}"></span>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="pagination z-pat z-fr"></div>

                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<script>
    var context = $("meta[name='ctx']").attr("content") || '';

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var startTime = '[[${startTime}]]';
    var endTime = '[[${endTime}]]';
    var deviceCode = '[[${deviceCode}]]';
    var deviceMac = '[[${deviceMac}]]';

    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var param = createQueryParam(pageIndex, pageSize);
            window.location.href = context + "/ckReport/singleDeviceReport" + isParamOk(param) ? "?" + param : "";
        }
    })

    $(function () {
        initDatePicker();
    })

    function initDatePicker() {

        flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文

        flatpickr(".fp-time", {
            // mode: "range",
            // 否启用时间选择
            enableTime: true,
            // 选择器中是否可以选择秒
            enableSeconds: true,
            time_24hr: true,
            dateFormat: 'Y-m-d H:i:S',
        });

    }

    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    // 后台渲染分页 - 补全url参数(后台传参可以忽略)
    $(".z-page a").each(function () {
        $(this).attr("href", $(this).attr("href") + location.search)
    });

    // 获取表格中选择的ID
    function getSelecteId() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                temp.push($(this).parents('tr,.tr').data('id'));
            }
        })

        return temp.join(',');
    }

    /**
     * 拼接请求参数
     * @param pageNum
     * @param pageIndex
     */
    function createQueryParam(pageIndex, pageSize) {
        var param = '';
        if (isParamOk(pageSize)) {
            param += "&pageSize=" + pageSize;
        }
        if (isParamOk(pageIndex)) {
            param += "&pageNum=" + pageIndex;
        }
        if (isParamOk(startTime)) {
            param += "&startTime=" + startTime;
        }
        if (isParamOk(endTime)) {
            param += "&endTime=" + endTime;
        }
        if (isParamOk(deviceCode)) {
            param += "&deviceCode=" + deviceCode;
        }
        if (isParamOk(deviceMac)) {
            param += "&deviceMac=" + deviceMac;
        }
        return param;
    }

    function isParamOk(param) {
        if (null == param) {
            return false;
        }
        if ('' === param) {
            return false;
        }
        if (undefined === param) {
            return false;
        }
        return true;
    }

    //导出excel
    $('#export').click(function () {
        var url = context + "/cpReport/singleDeviceExport";
        var paramStr = createQueryParam(null, null);
        if (paramStr !== "") {
            url = url + "?" + paramStr;
        }
        window.location.href = url;
    });
</script>
</body>

</html>